<template>
	<view :style="$store.state.skin">
		<view class="Historical">
			<view class="tab-box">
				<view :class="[isTabActive === index ? 'active' : '']" class="col" v-for="(item, index) in tabData" :key="item.id" @click="tabIsChange(index)">
					<text>{{ item.title }}</text>
				</view>
			</view>
			<view class="list-box">
				<view class="list" v-for="(item, index) in allHistory" :key="item.id">
					<view class="col-1">
						<view class="text1">{{ item.name }} {{ item.all_no }}</view>
						<view class="text2">{{ item.create_time }}</view>
					</view>
					<view class="col-2">
						<!-- 历史委托 -->
						<view class="col-2-box" v-if="isTabActive === 0">
							<view class="text1 red">委托价 &nbsp; {{ item.deal_price }}</view>
							<view class="text1 red">现价 &nbsp; {{ item.price }}</view>
							<view class="text1 red">委托数量 &nbsp; {{ item.num }}</view>
						</view>
						<view class="col-2-box" v-if="isTabActive === 0">
							<view class="text1 red">保证金 &nbsp; {{ item.total_earnest }}</view>
							<view class="text1">交易类型 &nbsp; {{ item.mode_text }}</view>
							<view class="text1">自动管理 &nbsp; {{ item.is_auto_text }}</view>
						</view>
						<view class="col-2-box" v-if="isTabActive === 0">
							<view class="text1">成交时间 &nbsp; {{ item.update_time }}</view>
						</view>
						<!-- 历史成交 历史结算 -->
						<view class="col-2-box" v-if="isTabActive === 1 || isTabActive === 2">
							<view class="text1 red">委托价 &nbsp; {{ item.deal_price }}</view>
							<view class="text1">委托数量 &nbsp; {{ item.num }}</view>
							<view class="text1">自动管理 &nbsp; {{ item.is_auto_text }}</view>
						</view>
						<view class="col-2-box" v-if="isTabActive === 1 || isTabActive === 2">
							<view class="text1 red">保证金 &nbsp; {{ item.total_earnest }}</view>
							<view class="text1" style="flex: 2">{{ isTabActive === 1 ? '成交' : '卖出' }}时间 &nbsp; {{ item.update_time }}</view>
							<view class=""></view>
						</view>
					</view>
				</view>
				<view class="image" v-if="allHistory.length <= 0">
					<image src="@/static/trade-icon/jy_icon09.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
export default {
	data() {
		return {
			tabData: [
				{
					id: 0,
					title: '历史委托'
				},
				{
					id: 1,
					title: '历史成交'
				},
				{
					id: 2,
					title: '历史结算'
				}
			],
			isTabActive: 0,
			allHistory: [] // 历史列表
		};
	},
	onLoad(option) {
		console.log(option);
		this.isTabActive = Number(option.isTabActive);
		// 获取历史列表数据
		if (this.isTabActive === 0) {
			this.gethistoryWT();
		} else if (this.isTabActive === 1) {
			this.gethistoryCJ();
		} else {
			this.gehistoryJS();
		}
	},
	onUnload() {
		console.log('页面销毁');
	},
	methods: {
		// 获取历史委托
		async gethistoryWT() {
			let data = await request.get('/api/entrust/history');
			if (data.code === 1) {
				this.allHistory = [];
				this.allHistory = data.data;
			}
		},
		// 获取历史成交
		async gethistoryCJ() {
			let data = await request.get('/api/entrust/history?mode=buy');
			if (data.code === 1) {
				this.allHistory = [];
				this.allHistory = data.data;
			}
		},
		// 获取历史结算
		async gehistoryJS() {
			let data = await request.get('/api/entrust/history?mode=sell');
			if (data.code === 1) {
				this.allHistory = [];
				this.allHistory = data.data;
			}
		},
		// tab栏切换
		tabIsChange(index) {
			this.isTabActive = index;
			if (index === 0) {
				this.gethistoryWT();
			} else if (index === 1) {
				this.gethistoryCJ();
			} else {
				this.gehistoryJS();
			}
		},
		// 时间戳转换
		timeFormat(timestamp) {
			// 此处时间戳以毫秒为单位
			let date = new Date(parseInt(timestamp) * 1000);
			let Year = date.getFullYear();
			let Moth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
			let Day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			let Hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			let Minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			let Sechond = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			let GMT = Year + '-' + Moth + '-' + Day + '   ' + Hour + ':' + Minute + ':' + Sechond;

			return GMT;
		}
	}
};
</script>

<style scoped lang="scss">
.Historical {
	.tab-box {
		width: 100%;
		display: flex;
		height: 90rpx;
		background-color: white;
		.col {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.active {
			border-bottom: 2px solid var(--nav-bg);
			color: var(--nav-bg);
		}
	}
	.list-box {
		padding: 20rpx 20rpx;
		background-color: white;
		.list {
			border-radius: 10rpx;
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx;
			box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
			-webkit-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
			-moz-box-shadow: 0px 2px 12px 3px rgba(195, 181, 181, 0.75);
			.col-1 {
				display: flex;
				justify-content: space-between;
				.text2 {
					font-size: 20rpx;
					color: #999;
				}
			}
			.col-2 {
				padding-top: 10rpx;
				.col-2-box {
					text-align: left;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					font-size: 20rpx;
					color: #999;
					.text1 {
						flex: 1;
						text-align: left;
					}
					.red {
						color: var(--nav-bg) !important;
					}
				}
			}
		}
		.image {
			display: flex;
			justify-content: center;
			image {
				transform: scale(0.5);
			}
		}
	}
}
</style>
